<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/layui.css">
    <script src="layui.js"></script>
</head>

<body>
    <div id="test1"></div>
    <script>
        layui.use(['transfer', 'layer'], function () {
            var transfer = layui.transfer;
            var $ = layui.$;
            var layer = layui.layer;
            $.post(
                "http://stuapi.ysdjypt.com/api/GetRolesByUserIdLayUI"
                , {
                    uid: 'c8033529-c2f7-4b32-877f-06004f05f7fe'
                    , token: '69f84759-5242-488f-b98c-88b8e504dd95'
                }, function (res) {
                    //console.log(res);
                    var valueArr = new Array();
                    for (var i = 0; i < res.data.length; i++) {
                        //console.log(res.data[i].Id);
                        valueArr.push(res.data[i].Id);
                    }
                    $.post(
                        "http://stuapi.ysdjypt.com/api/GetRolesAll"
                        , {
                            token: '69f84759-5242-488f-b98c-88b8e504dd95'
                        }
                        , function (res) {
                            //渲染
                            transfer.render({
                                elem: '#test1'  //绑定元素
                                , title: ["系统角色", "拥有角色"]
                                , data: res
                                , value: valueArr
                                , id: 'demo1' //定义索引
                                , parseData: function (res) {
                                    return {
                                        "value": res.Id //数据值
                                        , "title": res.Name //数据标题
                                        , "disabled": res.disabled  //是否禁用
                                        , "checked": res.checked //是否选中
                                    }
                                }
                                , onchange: function (data, index) {
                                    console.log(data); //得到当前被穿梭的数据
                                    console.log(index); //如果数据来自左边，index 为 0，否则为 1
                                    if (index == 0) {
                    for (var i = 0; i < data.length; i++) {
                      console.log(data.value);
                      $.post(
                        "http://stuapi.ysdjypt.com/api/AddUserToRole"
                        , {
                          uId: 'c8033529-c2f7-4b32-877f-06004f05f7fe'
                          , rId: data[i].value
                          , token: '69f84759-5242-488f-b98c-88b8e504dd95'
                        }
                        , function (res) {
                         

                        }, 'json'
                      );
                    }
                  } else {
                    for (var i = 0; i < data.length; i++) {

                      $.post(
                        "http://stuapi.ysdjypt.com/api/RemoveUserFromRole"
                        , {
                          uId: 'c8033529-c2f7-4b32-877f-06004f05f7fe'
                          , rId: data[i].value
                          , token: '69f84759-5242-488f-b98c-88b8e504dd95'
                        }
                        , function (res) {
                        

                        }, 'json'
                      );
                    }
                  }
                }
              });
                        }, 'json'
                    );
                }, 'json'
            );


        });
    </script>
</body>

</html>